﻿@inject AdminLTEUI WebUI

@using Kugar.Core.ExtMethod
@using Kugar.UI.Web.AdminLTE
@model Kugar.UI.Web.AdminLTE.Models.Model_Login
@{
    Layout = null;
    var baseUrl = AdminLTEUI.LayoutPath.ResourceBaseUrl;

    var subTitle = Model.Subtitle;
    if (string.IsNullOrWhiteSpace(subTitle))
    {
        subTitle = Model.Title;
    }
}

<!DOCTYPE html>
<html class="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge,chrome=1">
    <meta name="renderer"
          content="webkit|ie-comp|ie-stand">
    <meta name="author"
          content="">
    <meta name="keywords"
          content="">
    <meta name="description"
          content="">
    <title>@Model.Title</title>
    <link rel="stylesheet"
          href="@(baseUrl)/Content/lib/poposlides/poposlides.css">

    <style>
        * {
        box-sizing: border-box;
      }

      html {
        height: 100%;
        width: 100%;
      }

      body {
        margin: 0;
        height: 100%;
        width: 100%;
        color: #333;
        font-size: 14px;
        font-weight: normal;
        background-color: #fff;
        background-repeat: repeat;
        background-position: center;
        overflow: hidden;
      }

      /* 改 */
      form {
        position: absolute;
        right: 100px;
        top: 50%;
        transform: translate3d(0, -50%, 0);
      }

      form:after {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }

      .login-box {
        width: 425px;
        padding: 0 34px;
        text-align: center;
        position: relative;
        display: inline-block;
        vertical-align: middle;
      }

      .login-title-box {
        display: inline-block;
        height: 64px;
        margin-bottom: 20px;
      }

      .login-logo {
        width: 64px;
        height: 64px;
        margin-right: 20px;
        float: left;
      }

      .login-title {
        display: inline-block;
        color: #fff;
        font-size: 35px;
        line-height: 64px;
        height: 64px;
      }

      .login-img-box {
        margin-bottom: 20px;
      }

      .login-img-box img {
        width: 100%;
      }

      .login-info-box {
        width: 357px;
        height: 325px;
        /*background-color: rgba(255, 255, 255, 0.3);*/
        background-color: rgba(159, 196, 224, 0.8);
        border-radius: 20px;
        padding: 40px 30px;
      }

      .login-info-box > div {
        height: 40px;
        margin-bottom: 20px;
      }

      .login-info-box > div:last-child {
        height: 15px;
      }

      .login-ico {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: left center;
        float: left;
      }

      .login-info-box input {
        height: 40px;
        border: 0;
        outline: 0;
        float: left;
        padding: 10px;
        background-color: #fff;
        color: #117caf;
        font-size: 15px;
      }

      .login-account-box input,
      .login-password-box input {
        width: 257px;
      }

      .login-validate-box input {
        width: 157px;
      }

      .login-validate-box img {
        float: left;
        height: 40px;
        width: 100px;
        cursor: pointer;
      }

      .login-btn-box {
        width: 425px;
        height: 50px;
        background-color: #44999e;
        background: linear-gradient(to right, #44999e, #428bae);
        background: -webkit-linear-gradient(left, #44999e, #428bae);
        background: -o-linear-gradient(left, #44999e, #428bae);
        background: -moz-linear-gradient(left, #44999e, #428bae);
        position: absolute;
        left: 0;
        bottom: 40px;
      }

      .login-btn-box:before,
      .login-btn-box:after {
        content: ' ';
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        top: 50px;
      }

      .login-btn-box:before {
        border-width: 0 34px 17px 0;
        border-color: transparent #246165;
        left: 0;
      }

      .login-btn-box:after {
        border-width: 0 0 17px 34px;
        border-color: transparent #24566f;
        right: 0;
      }

      .login-btn-box button {
        background: transparent;
        border: 0;
        outline: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 24px;
      }

      .login-register-link {
        float: left;
        margin-left: 10px;
          text-decoration: none;
          font-weight: Normal;
      }

      .login-validate-box {
        margin-bottom: 10px;

      }

      .login-forgetpw-link {
        float: right;
        margin-right: 10px;
          text-decoration: none;
          font-weight: Normal;
      }

      /* 改 */
      .pagination li a {
        border-radius: 50% !important;
      }
      .slides-box .pagination li a {
        background-color: #fff;
        color: #fff;
      }
      .slides-box .pagination li a.active {
        background-color: #1890ff;
        color: #1890ff;
      }
    </style>
</head>


<body style="background-image: url('@(baseUrl)/Content/images/login_background.jpg'" );>
    <!--[if lte IE 8]>
        <noscript>
            <strong>很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它以继续浏览。</strong>
        </noscript>
    <![endif]-->
    
    @if (Model.SliderImageUrls.HasData())
    {        
        <div class="slides-box">
            <ul class="slides">
                @foreach (var item in Model.SliderImageUrls)
                {
                    <li style="background: url('@item.imageUrl') center center no-repeat;background-size:cover" onclick="window.location.href='@item.gotoUrl.IfEmptyOrWhileSpace("#")'"></li>
                }
            </ul>
            <ul class="pagination"></ul>
        </div>
    }



<div class="form-box">
    <form method="post">
        <div class="login-box">
            @if (Model.ViewType == 0)
            {
                <div class="login-title-box clearfix">
                    @if (!string.IsNullOrWhiteSpace(Model.LogoImageUrl))
                    {
                        <img class="login-logo" src="@Model.LogoImageUrl" />
                    }

                    <div class="login-title">@Html.Raw(subTitle)</div>
                </div>
            }
            else if (Model.ViewType == 1)
            {
                <div class="login-img-box">
                    <img src="@Model.LogoImageUrl" />
                </div>
            }
            <div class="login-info-box">
                <div class="login-account-box clearfix">
                    <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_user.png');"></span>
                    <input type="text" placeholder="请输入用户名" name="UserName" value="@Model.UserName" required />
                </div>
                <div class="login-password-box clearfix">
                    <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_pwd.png');"></span>
                    <input type="password" placeholder="请输入密码" name="Password" value="@Model.Password" required />
                </div>
                <div class="login-validate-box clearfix" style="margin-bottom: 10px;">
                    <span class="login-ico" style="background-image: url('@(baseUrl)/Content/images/login_validate.png');"></span>
                    <input type="text" placeholder="请输入验证码" name="VerificationCode" required />
                    <img src="/AdminCore/AdminLogin/VerificationCode" onclick="this.src = '/AdminCore/AdminLogin/VerificationCode?_=' + (new Date()).getTime();" />
                </div>
                @if (!string.IsNullOrWhiteSpace(Model.RegisterUrl))
                {
                    <a href="@Model.RegisterUrl" class="login-register-link">@Model.RegisterTitle</a>
                }

                @if (!string.IsNullOrWhiteSpace(Model.ForgetpasswordUrl))
                {
                    <a href="@Model.RegisterUrl" class="login-forgetpw-link">@Model.ForgetpasswordTitle</a>
                }

                <div class="clearfix"></div>
            </div>
            <div class="login-btn-box">
                <button type="submit">立即登录</button>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </form>
    <div class="clearfix"></div>
</div>

    @WebUI.SystemComponent.ServerMsg().RenderNoWebUIJS(true)
    
    @if (Model.SliderImageUrls.HasData())
    {
        <script src="@(baseUrl)/Content/lib/poposlides/poposlides.js"></script>
        <script>
            $(".slides").poposlides({
                playspeed:5000
            });
        </script>
    }

</body>


</html>